<!--
 * @Author: wang_jl
 * @Date: 2021-12-06 16:46:33
 * @LastEditTime: 2021-12-31 18:50:38
 * @LastEditors: wei_jt@ecidi.com
 * @Description: In User Settings Edit
 * @FilePath: \central-system\src\modules\SystemInformation\License\Activate.vue
-->
<template>
  <div
    class="container"
    v-loading="loading"
    :element-loading-text="LANG.LOADING"
  >
    <a href="https://fawkes.cybereng.com/">
      <img class="logo" src="@/assets/img/login/logo-orange.png" alt="" />
    </a>
    <div style="text-align: center; width: 474px">
      <div v-if="haveLicense">
        <img src="@/assets/img/permission/permission-info.png" alt="" />
        <div v-if="isExpire" style="margin: 36px 0">
          <i class="icon fks-icon-error"></i>{{ LANG.LICENSE_EXPIRED }}
        </div>
        <div v-if="!isExpire" style="margin: 36px 0">
          <i class="icon fks-icon-success"></i>{{ LANG.EXIST_NOT_EXPIRED }}
        </div>
      </div>
      <div v-if="!haveLicense">
        <img src="@/assets/img/permission/permission-update.png" alt="" />
        <div style="margin: 36px 0">
          <i class="icon fks-icon-error"></i>
          {{ LANG.NO_LICENSE }}
        </div>
      </div>
      <div class="info" v-if="haveLicense">
        <div class="info-label">{{ LANG.CURRENT_LICENSE }}</div>
        <div class="info-right">
          <div class="info-content">
            {{ licenseCode }}
          </div>
          <fks-button
            text
            class="fks-icon-copy"
            @click="clickCopy(licenseCode)"
          >
            {{ LANG.COPY }}
          </fks-button>
        </div>
      </div>
      <div class="info">
        <div class="info-label">{{ LANG.APPLICATION_CODE }}</div>
        <div class="info-right">
          <div class="info-content">
            {{ registrationCode }}
          </div>
          <fks-button
            text
            class="fks-icon-copy"
            @click="clickCopy(registrationCode)"
          >
            {{ LANG.COPY }}
          </fks-button>
        </div>
      </div>
      <div class="btn-container">
        <fks-button
          v-if="haveLicense && !isExpire"
          @click="$router.push('/home')"
          >{{ LANG.BACK_APPLICATION }}</fks-button
        >
        <fks-button v-else @click="toApplyLicense()">{{
          LANG.TOAPPLY
        }}</fks-button>
        <fks-button
          icon="fks-icon-upload-line"
          type="primary"
          @click="toUploadLicense()"
          >{{ LANG.UPLOAD_LICENSE }}</fks-button
        >
      </div>
    </div>
    <fks-dialog
      :visible.sync="uploadVisible"
      :append-to-body="true"
      width="800px"
      destroy-on-close
      :title="LANG.UPLOAD_LICENSE"
      @close="close"
    >
      <div>
        <fks-upload
          class="uploadLic"
          action=""
          drag
          name="file"
          :with-credentials="true"
          :auto-upload="false"
          :limit="1"
          accept=".zip"
          :show-download="false"
          :fileList.sync="fileList"
        >
          <i class="fks-icon-upload"></i>
          <div class="fks-upload__text">
            <div>
              {{ LANG.UPLOAD_TIP }}<em>{{ LANG.CLICK_UPLOAD }}</em>
            </div>
            <div style="margin-top: 8px">{{ LANG.SUPPORT_ZIP }}</div>
          </div>
        </fks-upload>
      </div>
      <div style="text-align: right" slot="footer">
        <fks-button @click="upload" type="primary" icon="fks-icon-check"
          ><span style="margin-left: 4px">{{ LANG.SAVE }}</span></fks-button
        >
      </div>
    </fks-dialog>
  </div>
</template>
<script>
import Mix from '@/mixins/module'
import { upload, getData, getRegistrationCode } from './api'
export default {
  name: 'License',
  mixins: [Mix],
  data() {
    return {
      loading: true,
      uploadVisible: false,
      licenseCode: '',
      registrationCode: '',
      fileList: [],
      haveLicense: false,
      isExpire: false
    }
  },
  mounted() {
    this.getRegistrationCode()
    this.getLicenseCode()
  },
  methods: {
    getRegistrationCode() {
      getRegistrationCode()
        .then((res) => {
          if (res.status) {
            this.registrationCode = res.data
          }
        })
        .catch((err) => {
          this.$confirm(this.LANG.ERROR_CODE_TIP, this.LANG.TIPS, {
            type: 'error',
            showCancelButton: false,
            closeOnPressEscape: false,
            closeOnClickModal: false
          })
        })
    },
    getLicenseCode() {
      this.loading = true
      getData()
        .then((res) => {
          this.loading = false
          if (res.data) {
            this.haveLicense = true
            if (this.compareTime(res.data.noteAfter)) {
              this.isExpire = true
            }
            this.licenseCode = res.data.extra.licenseCode
          } else {
            this.havaLicense = false
          }
          this.loading = false
        })
        .catch((err) => {
          this.$message.error(this.LANG.ERROR_LICENSE_TIP)
          this.loading = false
        })
    },
    compareTime(date) {
      if (new Date(date).getTime() < new Date().getTime()) {
        return true
      } else {
        return false
      }
    },
    clickCopy(value) {
      let inputEle = document.createElement('input')
      document.body.appendChild(inputEle)
      inputEle.value = value
      inputEle.select()
      document.execCommand('Copy')
      document.body.removeChild(inputEle)
      this.$message.success(this.LANG.COPY_SUCCESS)
    },
    toApplyLicense() {
      window.open('https://fawkes.cybereng.com/console/#/login')
    },
    toUploadLicense() {
      this.uploadVisible = true
    },
    upload() {
      this.$message.warning(this.LANG.UPLOADING)
      let params = {}
      this.fileList.forEach((item) => {
        params = item
      })
      let form = new FormData()
      form.append('file', params.raw)
      upload(form)
        .then((res) => {
          if (res.data.size == 4) {
            this.$message.success(this.LANG.UPLOAD_SUCCESS)
            this.close()
            this.getLicenseCode()
          } else {
            this.$message.error(this.LANG.UPLOAD_FAILED)
          }
        })
        .catch((err) => {
          this.$message.error(this.LANG.UPLOAD_FAILED)
        })
    },
    close() {
      this.fileList = []
      this.uploadVisible = false
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.logo {
  position: absolute;
  left: 30px;
  top: 20px;
  width: 100px;
}
.info {
  display: flex;
  align-items: center;
  min-height: 48px;
  background: #f1f2f6;
  border-radius: 4px;
  opacity: 0.8;
  padding: 4px 16px;
  margin-top: 16px;
}
.info-label {
  min-width: 80px;
}
.info-right {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
}
.info-content {
  width: 300px;
  text-align: right;
  word-break: break-all;
  color: #808185;
}
::v-deep.fks-icon-copy {
  span {
    margin-left: 0;
  }
}
.btn-container {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.btn-container {
  .fks-button--primary {
    min-width: auto;
    margin-left: 32px;
  }
}
.icon {
  margin-right: 5px;
  &.fks-icon-success {
    color: #40bb5a;
  }
  &.fks-icon-error {
    color: #ff4d4f;
  }
}
::v-deep.uploadLic {
  .fks-upload-dragger {
    width: 736px;
    margin: 0 auto;
  }
}
</style>